<include file="Common:header"/>
<script src="__PUBLIC__/js/draggabilly.pkgd.min.js"></script>
<script src="__PUBLIC__/js/jquerytouchSwipe.min.js"></script>
<style>

.clear_word {
    border-radius: 4px;
    background-color: #4084bb;
    color: #fff;
    width: 80px;
    height: 35px;
    text-align: center;
    margin:40px 0 0 0px;
    float: right;
    line-height: 35px;
}

body{
	padding-bottom:30px;
}
.roof{
	width:100%;
	height:100%;
	background-color: #000;
	position:absolute;
	top:0px;
	opacity: 0.5;
	z-index:2;
	display: none;
}
.baner_list .ad_baner{
	max-width: 640px;
	min-height:320px;
	margin:0px;
	display:block;
}
.dragdealer {
	position: relative;
	height: 0px;
	background: #FFF;
	border-radius: 8px;
	border: 1px solid #a7a7a7;
	width: 80%;
	margin: 0 auto;
	margin-top:35px;
	display: none;
	margin-bottom:13px;
}
.square {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: -18px;
	margin-left: -1px;
	cursor: pointer;
	width: 41px;
	height: 28px;
	background: #505054;
	border-radius: 8px;
	color: #FFF;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	padding-top: 7px;
}
.menu-line {
	width: 50%;
	margin: 2px auto;
	height: 5px;
	background: #FFF;
	display: block;
}
.input_e_s{
	width: 80%;
	height: 30px;
	text-align: center;
	border-radius: 5px;
	background-color: #60d0fe;
	color: #fff;
	margin:0 auto;
	margin-top: 20px;
}
</style>
<body>
	<form id="myform">
		<div class="page">
			<div class="baner_list">
				<div class="ad_baner" style='<{$backgound_style}>'>
					<img src="/Public/img/code.jpg" alt="二维码"  style="<{$code_style}>" id="code" >
					<if condition="!empty($background_style)">
						<{$background_style}>
					</if>
				</div>
			</div>
			<div style="clear:both">
				<input type="file" name="picture" id="file" onchange="btn_submit(this)" style="display:none">
				<input type="hidden" name="position_x" id="position_x" value="<{$param['position_x']}>">
				<input type="hidden" name="position_y" id="position_y" value="<{$param['position_y']}>">
				<input type="hidden" name="background_img"  id="background_img" value="<{$param['background_img']}>">
				<input type="hidden" name="code_width_size" id="code_width_size" value="<{$param['code_width_size']}>" >
				<input type="hidden" name="code_height_size" id="code_height_size" value="<{$param['code_height_size']}>">
				<input type="hidden" name="background_width" id="background_width" value="<{$param['background_width']}>">
				<input type="hidden" name="background_height" id="background_height" value="<{$param['background_height']}>">
				<input type="hidden" name="button_left" id = "button_left" value="<{$param['button_left']}>">
				<input type="hidden" name="code_id" id="code_id" value="<{$code_id}>">
			</div>
		</div>
	</form>

	<div style="text-align:center">
		<button class="input_e_s" onclick="select()" >选择图片</button>
	</div>

	<div style="text-align:center">
		<button class="input_e_s" onclick="display_code()" style="background-color: #E54040">二维码大小</button>
		<div class="dragdealer" >
			<div class="square" style="<{$button_left}>">
				<span class="value"></span>
				<span class="menu-line"></span>
				<span class="menu-line"></span>
				<span class="menu-line"></span>
			</div>
		</div>
	</div>

	<div style="text-align:center">
		<button class="input_e_s" onclick="save()" style="background-color: #2EBC82">确认修改</button>
	</div>

	<div id="zxloading">
		<div id="loadtext">
			<h1>
				<img src="/Public/img/loading4.gif">
			</h1>
			<p>
				加载中，请稍候…
			</p>
		</div>
	</div>
</body>
</html>
<script>
	$(function (){
		var draggie = new Draggabilly('#code',{
			containment: '.ad_baner'
		});
		draggie.on( 'dragEnd', function( event, pointer ) {
			var pos_x = parseInt($('#code').css('left'));
			var pos_y = parseInt($('#code').css('top'));
			$('#position_x').val(pos_x);
			$('#position_y').val(pos_y);
		});

	});

	//选择图片
	function select(){
		$('#file').click();
	}
	
	//点击按钮
	function btn_submit(obj){
	
			var file = $(obj).get(0).files[0]; //选择上传的文件
                 
			var r = new FileReader();
			
			r.readAsDataURL(file); //Base64

			$(r).load(function(){
				// 判断是否图片  
				if(!file){ 
					layer.open({
						content:'不是图片',
					}); 
					return ;  
				} 

				//限制图片格式
				if(!(file.type.indexOf('image')==0 && file.type && /\.(?:jpeg|jpg|png|gif)$/.test(file.name)) ){  
					layer.open({
						content:'图片只能是jpg,gif,png,jpeg',
					});
					return ;  
				}

				//限制大小
				var upload_size = '<{:C("upload_size")}>';

				if(file.size > upload_size){
					layer.open({
						content:'超出上传图片大小标准',
					});
					return ; 
				}
				
				//load图
				$.ajax({
					url:'<{$upload_url}>',
					data:{img: this.result,img_type:file.type,img_size:file.size,return_rate:1},
					type:"post",
					beforeSend:function(){
						//开始提交
						$("#zxloading").show();
					},
					complete:function(){
						//完成提交
						$("#zxloading").hide();
					},
					success:function(ret){

						if($('#background_display').length >= 1){
							$('#background_display').remove();
						}
						var html = '';

						html +='<img src="'+ret.img+'" alt="背景图片" id="background_display" style="width:100%;height:auto">';
						$('.ad_baner').append(html);

						var background_width  = $('#background_display').width();
						//获取图片宽度后乘以比例
						var background_height = Math.round(background_width * ret.rate);
						$('#background_width').val(background_width);
						$('#background_height').val(background_height);
						$("#background_img").val(ret.img);
						//同张图片上传多次，就要清空Input框，从新触发Onchang事件
						$('#background_display').height(background_height);
						$("#uploadImg").val(null);
					},
				});
			});
		}

	//保存
	function save(){
		var background_img   = $("#background_img").val();
		var code_width_size  = $('#code').width(); //宽度
		var code_height_size = $('#code').height();//高度
		$('#code_width_size').val(code_width_size);//二维码大小
		$('#code_height_size').val(code_height_size);//二维码大小
		var left             = $('.square').css('left');                  //距离左边多少像素
		$('#button_left').val(left);

		if(background_img == '' || background_img == undefined){
			layer.open({
				content:'请上传背景图片',
			});
			return;
		}
		$.ajax({
			type: "POST",
			url: "<{:U('ajax_change_code')}>",
			data: $('#myform').serialize(),
			success: function(msg){
				if(msg.status == 1){
					layer.open({
						content: '修改成功',
						end:function (){
							window.location.href = msg.url;
						}
					});
					return false;
				}else {
					layer.open({
						content: msg.info,
					});
					return false;
				}
			}
		});
		return ;
	}

	var limit_duration = 0;
	$('.square').swipe({

		swipeStatus : function (event, direction, distance, duration, fingerCount) {

			var left = $('.square').position().left; //左偏移值
			//当前移动距离减去上一移动距离
			if(limit_duration >= 0 && duration != 0){
				var p  = duration - limit_duration;
			}
			limit_duration = duration;

			var d_width   = $('.dragdealer').width(); //横条宽度
			var max_right = d_width - 39; //            //右边最大值 40是按钮的宽度
			var width  = $('#code').width(); //宽度
			var height = $('#code').height();//高度
			var max_code_width = $(window).width();
			//如果拖动距离小于横线的距离，就不能拖动
			if(distance == 'left'){

				if(left <= 1){
					$('#code').css('width',100+'px'); //减去宽度
					$('#code').css('height',100+'px');//减去高度
					$('.square').css('left',0);
				}else{

					$('#code').css('width', (width - p*2/3) + 'px'); //减去宽度
					$('#code').css('height', (height - p*2/3) + 'px');//减去高度
					$('.square').css('left',left - p);
				}
			}else if(distance == 'right'){

				if(left >= max_right){

					$('#code').css('width',260+'px'); //减去宽度
					$('#code').css('height',260+'px');//减去高度
					$('.square').css('left',max_right);

				}else{

					$('#code').css('width',(width+p*2/3)+'px'); //宽度
					$('#code').css('height',(height+p*2/3)+'px');//高度
					$('.square').css('left',left+p);
				}
			}
		},
	});

	//展现二维码动画
	function display_code(){
		$('.dragdealer').slideToggle();
	}

</script>